<script setup>
</script>
<template>
  <div id="Catalog" >
    <!--session改为session-->
<!--   <h2 >${sessionScope.category.name}  eg 乳酪</h2>-->
         <h2 >{{categoryName}}</h2>
    <div id="list" class="product_card_groups" >
      <div class="product_card_group" >
      <div class="product_card_groups"
           v-for="product in products"
           :key="product.productId">

        <div class="product_card" >
          <div id="product">
            <div>
<!--              <img id="pic" />-->
              <img id="pic" :src="product.picture"/>
            </div>

            <div class="product_card_content">
<!--              <h4><router-link to="/main/product">${product.name} eg 冻慕斯与焗芝士</router-link></h4>-->
<!--                 <h4><router-link to="/main/product">{{ product.name }}</router-link></h4>-->
              <h4><router-link :to=" {name:'product',params:{name:product.productId } }">{{ product.name }}</router-link></h4>
<!--              <div class="item_card_description">${product.productId} eg CHEESE-02</div>-->
              <div class="item_card_description">{{product.productId}}</div>
            </div>

          </div>


        </div>

      </div>
    </div>
   </div>
  </div>

</template>

<script>

import api from "@/api";

export default {
  name: "CategoryView",
  data() {
    return {
      products: [],
    };
  },
  watch: {
    '$route.params.name': function(newName, oldName) {
      // 在参数变化时执行刷新页面的操作
      this.refreshPage();
    }
  },
  methods: {
    refreshPage() {
      // 执行刷新页面的操作
      window.location.reload();
    }
  },
  created() {
    console.log("向后端获取products 数据");
    //获取url中的参数
    console.log("1")
    this.categoryName = this.$route.params.name;
    console.log("2")
    console.log(this.categoryName)

     //向后端获取products 数据（未完成）
    api.getProductsByCategory(this.categoryName).then(
        res => {
          console.log(res.data.data)
          this.products = res.data.data;
        }
    )

    //模拟category中的products
    this.products = [
    //     {
    //   description: "/src/assets/images/jerry.jpg",
    //   name: "朗姆芝士",
    //   productId: "CHEESE-04",
    // },
    //   {
    //     description: "/src/assets/images/jerry.jpg",
    //     name: "Jerry杰瑞",
    //     productId: "CHEESE-01",
    //   },
    //
    //   {
    //     description: "/src/assets/images/jerry.jpg",
    //     name: "Jerry杰瑞",
    //     productId: "CHEESE-01",
    //   },
    //   {
    //     description: "/src/assets/images/jerry.jpg",
    //     name: "Jerry杰瑞",
    //     productId: "CHEESE-01",
    //   },
   ];//数组
   },//creat函数
};
</script>

<script setup>
// import {onMounted} from "vue";
// onMounted(() => {
//   getData()
// })
// // //向后端获取数据Products
//  const getData = () => {
//   console.log("3")
//   //function getName(){
//    //获取url中的类名参数
//    // let category;
//    // category = this.$route.params.name;
//    //  console.log("3")
//    //   console.log(category)
//   //}//getName
//
//
//   //获取后端products数组
//   // api.getProductsByCategory(category).then(
//   //     res => {
//   //       console.log(res.data.results)
//   //       console.log(res.data.data)
//   //       this.products = res.data;
//   //     }
//   //  )
// }//const getData
</script>

<style scoped>
#list {
  /*display: flex;*/
  /*flex-flow: row wrap;*/
  /*align-content: flex-start;*/
  margin: 0px 135px;

}

.product_card_group {
  /*margin: auto;*/
  width: 1100px;

}

.product_card_groups {
  width: 320px;
  margin: 0px 20px;

}

</style>